<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商品新增</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
	<meta name="apple-mobile-web-app-capable" content="yes"> 
	<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
	<meta name="format-detection" content="telephone=no"> 
	<style>
		body{
			margin: 0px;
			padding: 0px;
			color: #444;
			font: normal 100% Helvetica, Arial, sans-serif;
		}
		ul{
			margin: 0px;
			padding: 0px;
		}
		.header{
			height: 4rem;
			background-color: black;
			color: white;
			text-align: center;
			line-height: 4rem;
		}
		.fl{
			float: left;
		}
		.fr{
			float: right;
		}
		h1 { font-size: 1.5em; }
		small {  font-size: 0.875em; 　　}
		.main { float: right; width: 70%; }
		.leftBar { float: left; width: 25%; }
		.rightBar { 
			float: left; 
			width: 75%; 
			min-height: 30rem;
			background-color: #eee;
		}
		.goodsTab{
			padding: 0px;
			margin: 0px;
		}
		.goodsTab li{
			list-style: none;
			line-height: 4rem;
			text-align: center;
    		border-bottom: 1px solid lightgray;
		}
		.active {
			color : red;
			background-color: #eee;
		}
		.goodsDetail{
			
			height: 100%;
		}
		.goodsDetail li{
			list-style: none;
			line-height: 3rem;
			text-align: left;
			padding-left: 0.5rem;
		}
		.goodsDetail li span{
			width: 30%;
			display: inline-block;
		}
		.goodDetail li select{
			width: 65%;
		    display: inline-block;
		    border: 1px solid lightgray;
		    line-height: 1.5rem;
		    height: 1.5rem;
		}
		.goodsDetail input{
			line-height: 1.5rem;
			right: 1rem;
			width: 65%;
			border-radius: 5px;
			border: 1px solid lightgray;
		}
		.saveBtn{
			background-color:  #04cf04 ;
			border-radius: 0.3rem;
			width: 6rem;
			color: #eee;
			font-size: 1rem;
		}
		.cancelBtn{
			background-color: #c9c9c9;
			border-radius: 0.3rem;
			width: 6rem;
			color: #fcfcfc;
			font-size: 1rem;
		}
		.btnGroup{
			margin-top: 2rem;
			width: 80%;
			margin: 0 auto;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="header">
		新增商品
	</div>
	<div>
		<div class="leftBar">
			<ul class="goodsTab">
				<li class="active">商品信息</li>
				<li>图片上传</li>
				<li>商品详情</li>
				<li>分销设置</li>
			</ul>
		</div>
		<div class="rightBar">
			<ul class="goodsDetail">
				<li>
					<span>产品ID</span>
					<input type="text" value="ERP3824">
				</li>
				<li>
					<span>商品分类</span>
					<select name="" id="">
						<option value="12">白酒</option>
					</select>
				</li>
				<li>
					<span>商品名称</span>
					<input type="text" value="湖北人人大有限公司">
				</li>
				<li>
					<span>商品原价</span>
					<input type="text" placeholder="请输入商品原价">
				</li>
				<li>
					<span>商品价格</span>
					<input type="text" placeholder="请输入商品价格">
				</li>
				<li>
					<span>商品库存</span>
					<input type="text" placeholder="请输入商品库存">
				</li>
			</ul>
				<div class="btnGroup">
					<button class="saveBtn">保存</button>
					<button class="cancelBtn">取消</button>
				</div>
		</div>
	</div>
</body>
</html>